<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>个人简历</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/modernizr.js"></script>
		<!--[if lt IE 9]>
      <script src="js/htlm5shiv.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="container-fluid">
				<div class="navbar-header">
					<a href="#" class="navbar-brand">
						<span class="glyphicon glyphicon-home"></span>
					</a>
					<button class="navbar-toggle" data-toggle="collapse" data-target="#divNav">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				</button>
				</div>
				<div class="collapse navbar-collapse" id="divNav">
					<ul class="nav navbar-nav">
						<li>
							<a href="#info">基本信息</a>
						</li>
						<li>
							<a href="#skill">所会技能</a>
						</li>
						<li>
							<a href="#work">工作经验</a>
						</li>
						<li>
							<a href="#project">项目展示</a>
						</li>
						<li>
							<a href="#contact">请联系我</a>
						</li>
					</ul>

				</div>
			</div>

		</nav>

		<div class="page-header text-center hidden-xs">
			<h1>个人简历</h1>
		</div>

		<div class="content">
			<!--基本信息-->
			<div class="row">
				<h4 id="info" class="visible-lg visible-md visible-sm">基本信息</h4>
				<div class="col-sm-4 col">
					<blockquote class="text-center">
						<p>叶希灿</p>
						<footer>web前端爱好者</footer>
					</blockquote>
					<div class="row text-center">
						<img src="img/boy.jpg" alt="boy" class="img-responsive img-circle img-thumbnail" />
					</div>

					<div class="row text-center">
						<div class="col-sm-4">
							<h3><abbr title="0年的工作经验">0</abbr></h3>
						</div>
						<div class="col-sm-4">
							<h3><abbr title="0个大型网站项目">0</abbr></h3>
						</div>
						<div class="col-sm-4">
							<h3><abbr title="6门相关技能">6</abbr></h3>
						</div>
					</div>

				</div>
				<div class="col-sm-8 col">
					<div class="jumbotron">
						<h2 class="text-center">自我评价</h2>
						<hr />
						<p><kbd> 1</kbd>年的工作<code>经验</code></p>
						<p><kbd> 0</kbd>个<code>大型</code>网站项目</p>
						<p><kbd> 6</kbd>门相关<code>技能</code></p>
						<div class="text-right">
							<button class="btn btn-primary">
								了解更多
                                <span class="glyphicon glyphicon-search"></span>								
							</button>
						</div>
					</div>
					<div class="table-responsive">
						<table class="table table-bordered table-striped table-hover table-condensed text-center">
							<tr>
								<td>姓名</td>
								<td>叶希灿</td>
								<td>年龄</td>
								<td>25岁</td>

							</tr>
							<tr>
								<td>学历</td>
								<td>大专</td>
								<td>专业</td>
								<td>前端开发</td>

							</tr>
							<tr>
								<td>手机号</td>
								<td>18521727839</td>
								<td>邮箱</td>
								<td>1119725276@qq.com</td>

							</tr>

						</table>
					</div>

				</div>
			</div>
			<!--所会技能-->
			<div class="row">
				<h4 id="skill">所会技能</h4>
				<p>
					<span class="label label-success">html5</span>
					<span class="label label-success">jqurey</span>
					<span class="label label-success">photoshop</span>
				</p>
				<div class="progress">
					<div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 40%;">
						<span>60%</span>
					</div>
				</div>

				<p>
					<span class="label label-info">css</span>
					<span class="label label-info">ajax</span>
					<span class="label label-info">flash</span>
				</p>
				<div class="progress">
					<div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 60%;">
						<span>60%</span>
					</div>
				</div>

				<p>
					<span class="label label-primary">JavaScript</span>
					<span class="label label-primary">fireworks</span>
					<span class="label label-primary">dreamweaver</span>
				</p>
				<div class="progress">
					<div class="progress-bar progress-bar-primary progress-bar-striped active" style="width: 40%;">
						<span>70%</span>
					</div>
				</div>

			</div>

			<!--工作经验-->
			<div class="row">
				<h4 id="work">工作经验</h4>
				<ul class="list-group">
					<li class="list-group-item active">
						<span>2014.9-<mark>至今</mark></span>
						<span class="text-primary">在上海凯虹电子有限公司上班</span>
						<div>web前端工程师<small>主要负责网站开发，优化，设计</small></div>
					</li>
					<li class="list-group-item">
						<span>2014.9-<mark>至今</mark></span>
						<span class="text-primary">在上海凯虹电子有限公司上班</span>
						<div>web前端工程师<small class="text-info">主要负责网站开发，优化，设计</small></div>
					</li>
					<li class="list-group-item">
						<span>2014.9-<mark>至今</mark></span>
						<span class="text-primary">在上海凯虹电子有限公司上班</span>
						<div>web前端工程师<small class="text-info">主要负责网站开发，优化，设计</small></div>
					</li>
				</ul>

			</div>

			<!--项目展示-->
			<div class="row">
				<h4 id="project">项目展示</h4>
				<div class="col-sm-7">
					<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
						<!-- Indicators -->
						<ol class="carousel-indicators">
							<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
							<li data-target="#carousel-example-generic" data-slide-to="1"></li>
							<li data-target="#carousel-example-generic" data-slide-to="2"></li>
						</ol>

						<!-- Wrapper for slides -->
						<div class="carousel-inner" role="listbox">
							<div class="item active">
								<img src="img/a.jpg" alt="..." >
								<div class="carousel-caption">

								</div>
							</div>
							<div class="item">
								<img src="img/b.jpg" alt="...">
								<div class="carousel-caption">

								</div>
							</div>
							<div class="item">
								<img src="img/c.jpg" alt="...">
								<div class="carousel-caption">

								</div>
							</div>
						</div>

						<!-- Controls -->
						<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a>
						<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a>
					</div>

				</div>
				<div class="col-sm-5">
					<div class="embed-responsive embed-responsive-16by9">
						<iframe src="video/Transformers.mp4" class="embed-responsive embed-responsive-item"></iframe>
					</div>
				</div>
				<!--请联系我-->
				<div class="row">
					<h4 id="contact">请联系我</h4>
					<div class="panel panel-default">
						<div class="panel-heading"></div>
						<div class="panel-body">
							<form action="#" method="post">
								<div class="form-group has-success has-feedback">
									<label class="control-label" for="inputSuccess2">email</label>
									<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
									<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
									<span id="inputSuccess2Status" class="sr-only">(success)</span>
								</div>
								<div class="form-group has-warning has-feedback">
									<label class="control-label" for="inputWarning2">userName</label>
									<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
									<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
									<span id="inputWarning2Status" class="sr-only">(warning)</span>
								</div>
								<div class="form-group has-error has-feedback">
									<label class="control-label" for="inputError2">content</label>
									<div class="input-group">
										<span class="input-group-addon">@</span>
										<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">

									</div>

									<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
									<span id="inputError2Status" class="sr-only">(error)</span>
								</div>
								<div class="btn btn-group pull-right">
									<button type="submit" class="btn btn-success">请联系我</button>
									<button type="reset" class="btn btn-danger">重置</button>

								</div>

							</form>
							<div class="clearfix"></div>
						</div>

					</div>

				</div>

			</div>

			<footer class="text-center"><span>&copy;版权所属</span></footer>

			<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
			<script type="text/javascript" src="js/bootstrap.js"></script>
	</body>

</html>